<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对数据作校验的插件</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app=Vue.createApp({
            data(){
                return{
                    name:'顾瑞祥',
                    age:21
                }
            },
            rules:{
                age:{
                    validata:age=>age>21,
                    message:'too young to simple '
                },
                name:{
                    validata:name=>name.length>4,
                    message:'too short'
                }
            },
            template:`<div>name:{{name}}</div><div>age:{{21}}</div>`
        })
       const myPlugin={
        install(app,options){
           app.mixin({
                created(){

                    for(const key in this.$options.rules){
                        const item=this.$options.rules[key]
             
                        this.$watch(key,(value)=>{
                            const result=item.validata(value);
             
                            if(!result)console.log(item.message)
                        })
                    }
                }
            })
        }
        }
        app.use(myPlugin)
     const vm=app.mount('#root')
    </script>
</body>
</html>